<template>
  <view class="order-page">
    <!-- 搜索框 -->
    <view class="search-box">
      <input 
        type="text" 
        class="search-input" 
        placeholder="查询重置" 
        v-model="queryParams.keyword"
        @input="handleSearch"
      />
    </view>

    <!-- 订单列表 -->
    <view class="order-list">
      <view class="order-item" v-for="(item, index) in orderList" :key="index">
        <view class="order-header">
          <text class="order-no">订单号：{{item.id}}</text>
          <text class="order-status" :class="'status-' + item.status">
            {{item.statusName || getStatusText(item.statusId)}}
          </text>
        </view>
        
        <view class="order-content">
          <view class="order-info">
            <view class="info-item">
              <text class="label">车牌号：</text>
              <text class="value">{{item.vehicleName}}</text>
            </view>
            <view class="info-item">
              <text class="label">停车场：</text>
              <text class="value">{{item.parkingId}}</text>
            </view>
            <view class="info-item">
              <text class="label">支付金额：</text>
              <text class="value price">¥{{item.payment}}</text>
            </view>
            <view class="info-item">
              <text class="label">创建时间：</text>
              <text class="value">{{item.createTime}}</text>
            </view>
            <view class="info-item" v-if="item.remark">
              <text class="label">备注：</text>
              <text class="value">{{item.remark}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="orderList.length > 0">
      <text v-if="loading">加载中...</text>
      <text v-else-if="!hasMore">没有更多了</text>
      <text v-else @click="loadMore">点击加载更多</text>
    </view>
  </view>
</template>

<script>
import { listPayment } from "@/api/order/orderbook.js";

export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: '',
        status: ''
      },
      orderList: [],
      loading: false,
      hasMore: true
    }
  },
  methods: {
    getPayMent() {
      this.loading = true;
      listPayment(this.queryParams).then(res => {
        if (res.code === 200) {
          const records = res.data.records || [];
          if (this.queryParams.pageNum === 1) {
            this.orderList = records;
          } else {
            this.orderList = [...this.orderList, ...records];
          }
          this.hasMore = records.length === this.queryParams.pageSize;
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    handleSearch() {
      this.queryParams.pageNum = 1;
      this.getPayMent();
    },
    loadMore() {
      if (this.loading || !this.hasMore) return;
      this.queryParams.pageNum += 1;
      this.getPayMent();
    },
    getStatusText(statusId) {
      const statusMap = {
        0: "待支付",
        1: "已支付",
        2: "已取消"
      };
      return statusMap[statusId] || "未知状态";
    }
  },
  onLoad() {
    this.getPayMent();
  }
}
</script>

<style lang="scss" scoped>
.order-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
  
  .search-box {
    padding: 20rpx;
    background: #fff;
    margin-bottom: 20rpx;
    
    .search-input {
      width: 100%;
      height: 70rpx;
      background: #f5f5f5;
      border-radius: 35rpx;
      padding: 0 30rpx;
      font-size: 28rpx;
    }
  }

  .order-list {
    .order-item {
      background: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      padding: 20rpx;

      .order-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #eee;

        .order-no {
          font-size: 28rpx;
          color: #333;
        }

        .order-status {
          font-size: 26rpx;
          &.status-0 { color: #ff9900; }
          &.status-1 { color: #07c160; }
          &.status-2 { color: #999; }
        }
      }

      .order-content {
        padding-top: 20rpx;

        .info-item {
          display: flex;
          margin-bottom: 10rpx;
          font-size: 28rpx;
          
          .label {
            color: #666;
            width: 160rpx;
          }
          
          .value {
            color: #333;
            flex: 1;
            &.price {
              color: #ff4d4f;
              font-weight: bold;
            }
          }
        }
      }
    }
  }

  .load-more {
    text-align: center;
    padding: 30rpx 0;
    color: #999;
    font-size: 28rpx;
  }
}
</style>